* {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 整体布局 */
.carousel {
  width: 800px;
  height: 400px;
  margin: 50px auto;
  background-color: #333;
  position: relative;
  overflow: hidden;
  /* ①作用：清除浮动
     ②作用：超出部分隐藏 */
}
/* 组图 */
.carousel .imgs {
  width: 1000%;
  /* width: 9999px; */
  /* 要超出的宽度=每张图的宽度 × 图像个数，方便扩展 */
  position: absolute;
  left: 0;
  top: 0;
  transition: left .5s ease;
  /* linear:匀速 ease:慢快慢 */
}
.carousel .imgs li {
  float: left;
}
.carousel .imgs li a {
  cursor: default;
}
.carousel .imgs img {
  width: 800px;
  height: 400px;
  border: none;
}
/* 控制器 */
.carousel .prev,
.carousel .next {
  width: 45px;
  height: 45px;
  position: absolute;
  top: 177px;
  z-index: 10;
  cursor: pointer;
}
.carousel .prev:hover,
.carousel .next:hover {
  background-color: aquamarine;
  border-radius: 50%;
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.carousel .prev {
  background: url(./images/l.png);
  left: 20px;
}
.carousel .next {
  background: url(./images/r.png);
  right: 20px;
}
/* 计数器(分页器) */
.carousel .count {
  width: 800px;
  height: 15px;
  position: absolute;
  bottom: 15px;
  z-index: 10px;
}
.carousel .count ul {
  width: 120px;
  margin: 0 auto;
  overflow: hidden;
}
.carousel .count li {
  width: 15px;
  height: 15px;
  margin: 0 6px;
  border-radius: 50%;
  background-color: #eee;
  opacity: 0.8;
  filter: alpha(opacity=80);
  float: left;
  cursor: pointer;
  z-index: 10;
  text-align: center;
  font-size: 10px;
}
.carousel .count li.active {
  background: aqua;
  opacity: 1;
  filter: alpha(opacity=100);
  color: purple;
}
